<template>
	<view style="display: flex;">
		<subCityListVue v-if:show="showList" ref="subCityList" @change="changeCity"></subCityListVue>
		<view>
			<view class="gl-header">
				<view class="gl-header-left" style="padding-left: 5px;">
					<uni-icons type="list" size="30" @click="showList=!showList"
						style="padding: 2px;border-radius: 4px; background-color: #00000033;"></uni-icons>
					<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
						@confirm="getSearch"></uni-search-bar>
				</view>
				<view class="gl-header-right">
					<view class="gl-button gl-button-success" hover-class="button-base-hover" :hover-stay-time="100"
						@click="addnew">
						<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">新增</text>
					</view>
					<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
						@click="refresh()">
						<uni-icons type="reload" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">刷新</text>
					</view>
				</view>
			</view>
			<view class="gl-body table-container" :style="{height:sch+'px'}" style="padding-left: 5px;">
				<uni-table stripe type="selection" emptyText="暂无更多数据">
					<uni-tr class="table-head">
						<uni-th align="center">商户ID</uni-th>
						<uni-th align="center" width="80">封面</uni-th>
						<uni-th>名称</uni-th>
						<uni-th>排序</uni-th>
						<uni-th>状态</uni-th>
						<uni-th>省.市.县</uni-th>
						<uni-th>地址</uni-th>
						<uni-th>注册时间</uni-th>
						<uni-th></uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in isoatList" :key="'item'+index">
						<uni-td align="center">{{item.sub_place.id}}</uni-td>
						<uni-td align="center" width="80">
							<view class="">
								<image :src="sConf.cos + (item.sub_logo ?? '/media/default/cover.png')" mode="heightFix"
									style="width: 72x;height: 72px;border-radius: 5px;"></image>
							</view>
						</uni-td>
						<uni-td>{{item.sub_place.nicename}}</uni-td>
						<uni-td> <uni-number-box :value="item.hot" :min="0"
								@change="event => {changeHot(event, item.id)}"></uni-number-box></uni-td>
						<uni-td>
							<switch :checked="item.sub_place.status === 1" style="transform:scale(0.5)"
								:disabled="true" />
						</uni-td>
						<uni-td>{{item.sub_place.sheng}}.{{item.sub_place.shi}}.{{item.sub_place.xian}}</uni-td>
						<uni-td>{{item.sub_place.address}}</uni-td>
						<uni-td>{{item.sub_place.created}}</uni-td>
						<uni-td>
							<view style="display: flex;gap: 5px;">
								<text class="gl-link gl-link-error" @click="remove(item)">移除</text>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh()" />
			</view>


			<popPlaceSelectVue ref="popPlaceSelect" desc="搜索商户" @change="addIsoSync"></popPlaceSelectVue>
			<!--
			<popProductImageVue ref="popProductImage" @reload="refresh"></popProductImageVue>
			-->
		</view>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import subCityListVue from './sub-city-list.vue';
	import popPlaceSelectVue from '@/components/sub-place/pop-place-select.vue';

	export default {
		data() {
			return {
				sch: 0,
				title: '悦玺严选',
				sConf: getApp().globalData,
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				search: '',
				isoatList: [],
				showList: true,
				curCid: null
			}
		},
		mounted() {
			this.designLayout()
			this.refresh()
		},
		components: {
			subCityListVue,
			popPlaceSelectVue
		},
		methods: {
			changeHot(n, e) {
				console.log('changeHot', e, n);
				let tk = this.sConf.auth.token ?? ''
				let data = {
					hot: n
				}
				psMethod.syncAuthenticatorRequest(`/admin/local/${e}/`, 'PATCH', tk, data).then(res => {
					this.refresh()
				})
			},
			changeCity(e) {
				console.log('changeCity', e);
				this.page = 1
				this.curCid = e
				this.refresh(e)
			},
			remove(e) {
				let that = this
				uni.showModal({
					title: '移除同城',
					content: '是否要移除该商户',
					success(r) {
						if (r.confirm) {
							let token = that.sConf.auth.token ?? ''
							psMethod.syncAuthenticatorRequest(`/admin/local/${e.id}/`, 'DELETE', token).then(
								res => {
									console.log('创建同城', res);
									that.refresh()
								})
						}
					}
				})
			},

			addIsoSync(e) {
				console.log('addIsoSync', e);
				let that = this
				uni.showModal({
					title: '创建同城',
					content: '是否要加入同城列表',
					success(r) {
						if (r.confirm) {
							let token = that.sConf.auth.token ?? ''
							let data = {
								pid: e,
								local: this.curCid
							}
							psMethod.syncAuthenticatorRequest('/admin/local/', 'POST', token, data).then(res => {
								console.log('创建同城', res);
								that.refresh()
							}).catch(err => {
								uni.showToast({
									title: '创建失败'
								})
							})

						}
					}
				})
			},
			addnew() {
				this.$refs.popPlaceSelect.open()
			},
			refresh(e = null) {
				let token = this.sConf.auth.token ?? ''
				let data = {
					page: this.page,
					ordering: '-hot'
				}
				if (this.curCid) {
					data['local'] = this.curCid
				}
				if (e) {
					data['local'] = e
				}
				psMethod.syncAuthenticatorRequest('/admin/local/', 'GET', token, data).then(res => {
					console.log('加载商品列表', res);
					if (this.page > 1) {
						let tmpData = this.isoatList.concat(res.resmsg)
						this.isoatList = tmpData
					} else {
						this.isoatList = res.resmsg
						this.count = res.count
						this.size = res.size
					}
				}).catch(err => {
					if (err.rescode === 404 && this.page > 1) {
						this.page -= 1
					}
				})
			},
			getSearch(e) {

			},
			designLayout() {
				this.$nextTick(() => {
					let window = uni.getWindowInfo();
					let wh = window.windowHeight;
					let query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.sch = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>